<template>
  <div class="home">
    <v-header></v-header>
    <v-sidebar></v-sidebar>
    <div class="content-box" :class="{'content-collapse':collapse}">
      <v-tabs></v-tabs>
      <div class="content">
        <transition name="move" model="out-in">
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </transition>
      </div>
    </div>

  </div>
</template>

<script>
  import vHeader from './Header'
  import vSidebar from './Sidebar'
  import vTabs from './Tabs'

  export default {
    components: {
      vHeader, vSidebar, vTabs
    },
    data() {
      return {
        collapse: false
      }
    },
    created() {
      this.$bus.$on('collapse', (message) => {
        this.collapse = message;
      })
    }
  }
</script>

<style scoped>

</style>
